<template>
  <!-- 策略分案数据查询 -->
  <section class="page strategy-allot-record-query">
    <data-form :model="searchModel" :page="pageService" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="分案时间" prop="distributeDate">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="datetimerange" v-model="searchModel.distributeDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="催收总金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="searchModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod" class="">
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriodMin" class="overduePeriod-box">
            <el-option :key="index" :label="name" :value="code.replace('N', '')" v-for="{ index, name, code } in $dict.getDictData(
                'OverduePeriodStatus'
              )"></el-option>
          </el-select>
          -
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriodMax" class="overduePeriod-box">
            <el-option :key="index" :label="name" :value="code.replace('N', '')" v-for="{ index, name, code } in $dict.getDictData(
                'OverduePeriodStatus'
              )"></el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="逾期天数" prop="overDueDays">
          <number-range :isInteger="true" v-model="searchModel.overDueDays"></number-range>
        </el-form-item>
        <el-form-item label="策略名称" prop="strategyName">
          <el-input v-model="searchModel.strategyName"></el-input>
        </el-form-item>
        <el-form-item label="案件类型" prop="departmentType">
          <el-select clearable placeholder="请选择" v-model="searchModel.departmentType">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('DepartmentType')"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.distributeDate)" :min-width="$helper.getColumnWidth(7)" label="分案时间" prop="distributeDate" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="催收总金额(元)" prop="overdueAmount"></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`N${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期阶段" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="逾期天数" prop="overDueDays" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="策略名称" prop="strategyName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="案件类型" prop="departmentType" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.departmentType | dictConvert('DepartmentType')}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service";
import { namespace, Getter, Mutation } from "vuex-class";
import { MENU_CHANNEL } from "../../config/enum.config";

@Layout("workspace")
@Component({
  components: {
    NumberRange
  }
})
export default class StrategyAllotRecordQuery extends Vue {
  @Dependencies(PageService) private pageService: PageService;

  @Dependencies(SortService) private sortService: SortService;

  @Dependencies(SynthesizeQueryService)
  private synthesizeQueryService: SynthesizeQueryService;

  private searchModel: any = {
    caseNumber: "",
    strategyName: "",
    departmentType: "",
    distributeDate: [],
    overDueDays: { min: "", max: "" },
    overdueAmount: { min: '', max: '' },
    overduePeriodMin: '',
    overduePeriodMax: '',
  };

  private dataSet: any[] = [];

  private refreshData() {

    this.synthesizeQueryService
      .queryCaseDistributeData(this.searchModel, this.pageService)
      .subscribe(data => (this.dataSet = data));
  }

  private handleResetForm() {
    this.searchModel.overDueDays = { min: "", max: "" };
    this.searchModel.overduePeriodMax = ''
    this.searchModel.overduePeriodMin = ''
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  private mounted() {
    this.refreshData();
  }
}
</script>
<style lang="less">
</style>
